<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Quiz</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .quiz {
            margin-bottom: 20px;
        }
        .options label {
            margin-right: 10px;
        }
        .error {
            color: red;
        }
        .loading {
            color: blue;
        }
    </style>
</head>
<body>
<h1>Word Quiz</h1>
<div id="app">
    <div class="loading" id="loading">Loading...</div>
    <div class="error" id="error" style="display: none;">Failed to load quizzes. Please try again later.</div>
    <div id="quiz-container" style="display: none;">
        <!-- Questions will be dynamically added here -->
    </div>
    <button id="submit-button" style="display: none;">Submit</button>
</div>

<script>
    const apiUrl = "http://localhost:8080/getWords/quiz"; // Spring Boot 后端的接口地址
    const app = document.getElementById("app");
    const loading = document.getElementById("loading");
    const error = document.getElementById("error");
    const quizContainer = document.getElementById("quiz-container");
    const submitButton = document.getElementById("submit-button");

    // Fetch quiz data from the backend
    async function fetchQuizData() {
        try {
            const response = await fetch(apiUrl);
            if (!response.ok) {
                throw new Error("Network response was not ok");
            }
            const data = await response.json();
            displayQuizzes(data);
        } catch (err) {
            console.error("Failed to fetch quiz data:", err);
            loading.style.display = "none";
            error.style.display = "block";
        }
    }

    // Display quizzes on the page
    function displayQuizzes(quizzes) {
        loading.style.display = "none";
        quizContainer.style.display = "block";
        submitButton.style.display = "block";

        quizzes.forEach((quiz, index) => {
            const quizDiv = document.createElement("div");
            quizDiv.className = "quiz";

            const question = document.createElement("p");
            question.textContent = `Word: ${quiz.word}`;
            quizDiv.appendChild(question);

            const optionsDiv = document.createElement("div");
            optionsDiv.className = "options";

            quiz.options.forEach((option, i) => {
                const label = document.createElement("label");

                const input = document.createElement("input");
                input.type = "radio";
                input.name = `quiz-${index}`;
                input.value = option;

                label.appendChild(input);
                label.appendChild(document.createTextNode(option));
                optionsDiv.appendChild(label);
            });

            quizDiv.appendChild(optionsDiv);
            quizContainer.appendChild(quizDiv);
        });
    }

    // Handle form submission
    submitButton.addEventListener("click", () => {
        const userAnswers = [];
        const quizzes = quizContainer.querySelectorAll(".quiz");

        quizzes.forEach((quiz, index) => {
            const selectedOption = quiz.querySelector(`input[name="quiz-${index}"]:checked`);
            userAnswers.push(selectedOption ? selectedOption.value : null);
        });

        console.log("User Answers:", userAnswers);
        alert("Answers submitted! Check the console for details.");
    });

    // Initialize the app
    fetchQuizData();
</script>
</body>
</html>
